<template>
    <div id="topic">
        <ul class="topic">
            <li class="topic-card" v-for="item in list" :key="item.id">
                <img v-lazy="item.scene_pic_url" alt="">
                <div class="info">
                    <h4>{{ item.title }}</h4>
                    <div class="sub">{{ item.subtitle }}</div>
                    <p>{{ item.price_info | RMB }}&nbsp;起</p>
                </div>
            </li>
        </ul>

        <div class="btn">
            <van-button plain type="info" size="normal" :disabled="currentPage == 1" @click="prev">上一页</van-button>
            <span></span>
            <van-button plain type="info" size="normal" :disabled="currentPage == totalPages"
                @click="next">下一页</van-button>
        </div>
        <!-- 加载动画 -->
        <Location :show="show"></Location>
    </div>
</template>

<script>
import { getTopic } from "@/api/home.js"
import Location from '@/components/Location'
export default {
    components: {
        Location,
    },
    data() {
        return {
            show: true,
            currentPage: 1,
            totalPages: 1,
            list: [],
        }
    },
    methods: {
        async getData(val = 1) {
            this.show = true
            let res = await getTopic(val);
            this.show = false;
            let data = res.data.data
            this.currentPage = data.currentPage
            this.totalPages = data.totalPages
            this.list = data.data
        },
        prev() {
            if ((this.currentPage - 1) < 0) {
                return
            }
            this.getData(--this.currentPage)
        },
        next() {
            if ((this.currentPage + 1) > this.totalPages) {
                return
            }
            this.getData(++this.currentPage)
        }
    },
    created() {
        this.getData()
    }
}
</script>

<style lang="less" scoped>
#topic {
    margin-bottom: 50px;
}

.topic {
    width: 100%;

    .topic-card {
        img {
            width: 100%;
            height: 216px;
        }

        .info {
            font-size: 16px;
            text-align: center;
            margin-bottom: 10px;
            background-color: #fff;

            h4 {
                height: 40px;
                line-height: 40px;
            }

            .sub {
                font-size: 12px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            p {
                color: red;
                height: 40px;
                line-height: 40px;
            }

        }
    }
}

.btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;

    .van-button {
        width: 49%;
        border: 1px solid transparent;
    }
}
</style>